<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    {% block head %}
    <title>在线不聊天</title>
    {% endblock %}
    <link rel="stylesheet" href="{{ url_for('static', filename='simpleui.css') }}" type="text/css">
</head>
<body>

<div class="simpleui-header">
    <div class="simpleui-topnav">
        <a href="/" class="simpleui-topnav-logo" title="在线不聊天">
            <strong>ChatOnline</strong>
        </a>
        <a href="/" >首页</a>
        <a href="/read" >阅读</a>

        <span style="float:right">
            {% if current_user.is_authenticated %}
            <a href="/sorts"  >分类管理</a>
            <a href="/websites" >网站管理</a>
            <a href="/">你好 {{ current_user.nickname }}</a>
            <a href="/logout" >注销</a>
            {% else %}
            <a href="/register">注册</a>
            <a href="/login" >登录</a>
            {% endif %}
        </span>
    </div>
</div>

<div class="simpleui-container">
    <div class="simpleui-leftcolumn">
        {% with messages = get_flashed_messages() %}
        {% if messages %}
            <div class="simpleui-box simpleui-row">
                {% for message in messages %}
                <div style="color: orangered">{{ message }}</div>
                {% endfor %}
            </div>
        {% endif %}
        {% endwith %}

        {% block content %}
        <div class="simpleui-row">
        </div>
        {% endblock %}
    </div>
    <div class="simpleui-rightcolumn">
    </div>
</div>

<div class="simpleui-footer">
    <small>&copy; 2021 基于 Flask , 运行于<del>腾讯云 Serverless</del> <a href="https://aws.amazon.com/cn/elasticbeanstalk/" target="_blank">Amazon Elastic Beanstalk </a></small>
</div>
</body>
<script src="https://zeptojs.bootcss.com/zepto.min.js"></script>
<script>
    $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};

    $(function (){
        $.getJSON($SCRIPT_ROOT + '/api/extracts/random', function (data){
            if (data.code != 2000) {
                return;
            }
            if (data.data.logic) {
                let logic = data.data.logic;
                let sidebar = `<div class="simpleui-box">
                                <div class="simpleui-card">
                                    <h3>${logic.title}</h3>
                                    ${logic.content}
                                </div>
                            </div>`
                $('.simpleui-rightcolumn').append(sidebar);
            }
            if (data.data.quotation) {
                let quotation = data.data.quotation;
                let sidebar = `<div class="simpleui-box">
                                <div class="simpleui-card">
                                    <h3>${quotation.title}</h3>
                                    <p>${quotation.content}</p>
                                </div>
                            </div>`
                $('.simpleui-rightcolumn').append(sidebar);
            }
        });
    });
</script>
{% block script %}
{% endblock %}
</html>
